<template>
  <div style="background-color: #f4f1f4">
    <el-row :span="24" class="home" :gutter="10">
      <el-col :span="8">
        <div>
          <el-card shadow="hover">
            <div class="user">
              <img :src="userImg" alt="用户头像" />
              <div class="user_info">
                <p class="name">{{ looginuser.loginName }}</p>
                <p class="access">{{ looginuser.loginRole }}</p>
              </div>
            </div>
            <div class="logo_info">
              <p>
                上次登录时间： <span>{{ looginuser.loginTime }}</span>
              </p>
              <p>
                上次登录地点： <span>{{ looginuser.loginAddress }}</span>
              </p>
            </div>
          </el-card>
        </div>
        <div>
          <el-card shadow="hover" style="margin-top: 20px">
            <el-table
              :data="tableData"
              highlight-current-row
              stripe
              :header-cell-style="{ background: 'antiquewhite' }"
            >
              <el-table-column
                show-overflow-tooltip
                sortable
                v-for="(val, key) in tableValue"
                :key="key"
                :prop="key"
                :label="val"
              ></el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="num_top_wrap">
          <div v-for="item in numtopData" :key="item.name" class="pic">
            <el-card shadow="hover" :body-style="{ display: 'flex', padding: '0' }">
              <i class="icon_bg" :class="`el-icon-${item.icon}`" :style="{ background: item.color }"></i>
               <div class="detail">
                  <!-- <p class="pick_num">￥ {{ item.value }} 元</p>
                  <p class="text">{{ item.name }}</p> -->
               </div> 
            </el-card>
          </div>
         </div>
        <div class="chart">
          <el-card shadow="hover">
            <echart
              style="height: 280px"
              :chartData="echartData.order">
            </echart>
          </el-card>
        </div>
        <div class="graph_wrap">
          <el-card shadow="hover">
            <echart style="height: 260px" :chartData="echartData.user"></echart>
          </el-card>
          <el-card shadow="hover">
            <echart
              style="height: 260px"
              :chartData="echartData.video"
              :isAxisChart="echartData.video.isAxisChart"
            ></echart>
          </el-card>
        </div> 
      </el-col> 
    </el-row>
  </div>
</template>

<script>
import echart from "../components/echart";
export default {
  components: {
    echart,
  },
  data() {
    return {
      userImg: require("../../assets/img/userImg.jpg"),
      looginuser: {
        loginName: "Nick",
        loginRole: "超級管理员",
        loginTime: null,
        loginAddress: "广州市天河区",
      },
      numtopData: [], // 订单数据
      tableData: [], //表格数据
      tableValue: {
        //表格表头名称
        name: "课程",
        todayBuy: "今日购买",
        monthBuy: "本月购买",
        totalBuy: "总购买",
      },
      echartData: {
        //所有图表的数据
        order: {
          //订单图表
          xData: [],
          series: [],
          text: ''
        },
        user: {
          //用户图表
          xData: [],
          series: [],
          text: ''
        },
        video: {
          //视频图表
          series: [],
          isAxisChart: false,
          text: '视频学习人数量图表'
        },
      },
    };
  },
  created() {
    this.gethomeData();
    this.gettime();
  },
  methods: {
    gettime() {
      let time = new Date();
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let months = month < 10 ? "0" + month : month;
      let day = time.getDate();
      let days = day < 10 ? "0" + day : day;
      let hour = time.getHours();
      let hours = hour < 10 ? "0" + hour : hour;
      let minute = time.getMinutes();
      let minutes =  minute < 10 ? "0" + minute : minute;
      let second = time.getSeconds();
      let seconds =  second < 10 ? "0" + second : second;
      this.looginuser.loginTime = `${year}-${months}-${days}-${hours}:${minutes}:${seconds}`;
    },
    gethomeData() {
      this.$http.get("/home/getData").then((res) => {
        if (res.data.code == 20000) {
          console.log(res);
          this.numtopData = res.data.data.numtopData; //订单数据
          this.tableData = res.data.data.tableData; //表格数据
          this.echartData.order.xData = res.data.data.orderData.selltime; //订单折线图x轴数据
          this.echartData.order.text = res.data.data.orderData.text;
          //获取series数组对象的数组
          //1.取出数组每一项对象的key键名 作为 series数组对象每一项的name名称
          let keyArray = Object.keys(res.data.data.orderData.selldata[0]); //每一项key值是重复的
          console.log(keyArray);
          //2.遍历key值的数组，来找到相应的value值
          keyArray.forEach((key) => {
            this.echartData.order.series.push({
              //series数据是：数组对象
              name: key === "wechat" ? "微信小程序" : key,
              //通过key值，遍历数组对象找相应的value值
              data: res.data.data.orderData.selldata.map((item) => item[key]),
              type: "line",        
              barGap: 0   //柱状之间的间距
            });
          });
          //获取用户数据
          this.echartData.user.xData = res.data.data.userData.time;
          this.echartData.user.text = res.data.data.userData.text;
          let userKey = Object.keys(res.data.data.userData.num[0]);
          console.log(userKey);
          userKey.forEach((key) => {
            this.echartData.user.series.push({
              name: key, //key名称
              data: res.data.data.userData.num.map((item) => item[key]), //value值
              type: "bar",
            });
          });
          //获取视频数据
          this.echartData.video.series.push({
            data: res.data.data.videoData,
            type: "pie",
            name: "学习人数(人)",
            center: [260, 130]
          });
        }
      });
    },
  },
};
</script>

<style scoped>
/* 左上角登录信息 */
.user {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.user img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-right: 40px;
}
.user_info .name {
  font-size: 32px;
  margin-bottom: 10px;
}
.user_info .access {
  color: #999999;
}
.logo_info p {
  line-height: 28px;
  font-size: 14px;
  color: #999999;
}
.logo_info p span {
  color: #666666;
  margin-left: 50px;
}
/* 左下角table数据 */

/* 右上角订单信息 */
 .num_top_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.num_top_wrap .pic{
  width: 32%;
  margin-bottom: 20px;
  margin-left: 0px;
}
.num_top_wrap .icon_bg {
  font-size: 35px;
  color: #fff; 
  width: 80px;
  height: 80px;
  text-align: center;
  line-height: 80px;
} 
.detail {
  display: flex;
  flex-direction: column; 
  /*主轴为垂直方向，起点在上沿*/
  justify-content: center;
  margin-left: 15px;
}
.detail .pick_num {
  font-size: 25px;
  margin-bottom: 8px;
}
.detail .text {
  color: #999999;
  font-size: 16px;
  text-align: center;
}
/* 右下角图标新 */
.graph_wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.graph_wrap .el-card {
  width: 48%;
}
</style>
